<template>
  <el-col class="info-wrapper" :span="23">
    <el-form
      ref="form"
      :model="searchParams"
      class="search-from main-content"
      label-width="120px"
    >
      <el-col class="search-col">
        <el-form-item label="生产企业" prop="produceCompany">
          <el-input v-model="searchParams.produceCompany"></el-input>
        </el-form-item>
        <el-form-item label="检查任务号" prop="checkTaskId">
          <el-input v-model="searchParams.checkTaskId"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-select
            v-model="searchParams.province"
            placeholder="请选择"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="认证体系" prop="certificationSystem">
          <el-select
            v-model="searchParams.certificationSystem"
            placeholder="请选择"
          >
            <el-option
              v-for="item in certificationSystemList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核员" prop="auditor">
          <el-input v-model="searchParams.auditor"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="实际开始" prop="actualStartTime">
          <el-date-picker
            v-model="searchParams.actualStartTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="actualEndTime">
          <el-date-picker
            v-model="searchParams.actualEndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际结束" prop="cancelStartTime">
          <el-date-picker
            v-model="searchParams.cancelStartTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="cancelEndTime">
          <el-date-picker
            v-model="searchParams.cancelEndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="组内身份" prop="groupIdentity">
          <el-radio v-model="searchParams.groupIdentity" label="groupLeader">组长</el-radio>
          <el-radio v-model="searchParams.groupIdentity" label="groupMember">组员</el-radio>        
        </el-form-item>
        <el-form-item label="注册资格" prop="registrQualifications">
          <el-select
            v-model="searchParams.registrQualifications"
            placeholder="请选择"
          >
            <el-option
              v-for="item in registrQualificationsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工厂编号" prop="companyId">
          <el-input v-model="searchParams.companyId"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="search-col operation-area">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">清空</el-button>
        <el-button @click="batchExport">批量导出</el-button>
      </el-col>
    </el-form>

    <el-tabs class="table-tabs" type="border-card">
      <el-tab-pane>
        <span slot="label">已派人项目查询 {{ sendSearchTableData.length }}</span>
        <el-table border :data="sendSearchTableData">
          <el-table-column prop="date" label="检查任务号"> </el-table-column>
          <el-table-column prop="date" label="生产企业"> </el-table-column>
          <el-table-column prop="date" label="姓名"> </el-table-column>
          <el-table-column prop="date" label="组内身份"> </el-table-column>
          <el-table-column prop="date" label="资格"> </el-table-column>
          <el-table-column prop="date" label="组长"> </el-table-column>
          <el-table-column prop="date" label="实际开始时间"> </el-table-column>
          <el-table-column prop="date" label="实际结束时间"> </el-table-column>
          <el-table-column prop="date" label="联系人"> </el-table-column>
          <el-table-column prop="date" label="电话"> </el-table-column>
          <el-table-column prop="date" label="分公司"> </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: "checkSendSearch",
  data() {
    return {
      defulatParams: {
        produceCompany: "", // 生产企业
        checkTaskId: "", // 检查任务号
        province: "", // 省份
        certificationSystem: "", // 认证体系
        auditor: "", // 审核员
        actualStartTime: "", // 实际开始
        actualEndTime: "", // 至（实际开始）
        cancelStartTime: "", // 实际结束
        cancelEndTime: "", // 至（实际结束）
        groupIdentity: "", // 组内身份
        registrQualifications: "", // 注册资格
        companyId: "" // 工厂编号
      },
      searchParams: {
        ...this.defulatParams,
      },
      sendSearchTableData: [{ date: 123 }], // 已派人项目查询表格数据
      provinceList: [], // 省份列表数据
      certificationSystemList: [], // 认证体系列表数据
      registrQualificationsList: [] // 注册资格列表数据
    };
  },
  mounted() {
    this.queryTableData();
  },
  methods: {
    search() {
      // todo: 搜索方法
    },
    reset() {
      this.searchParams = {
        ...this.defulatParams
      };
      this.search();
    },
    batchExport() {
      // todo: 批量导出方法
    },
    queryTableData() {
      // todo：获取表格数据
    }
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .search-from {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #c2d9e6;
    padding-top: 20px;

    .search-col {
      display: flex;
    }

    .operation-area {
      margin-left: 20px;
      margin-bottom: 10px;
    }
  }

  .table-tabs {
    margin-top: 15px;
  }

  .operation-col {
    white-space: 5px;
  }
}
</style>
